
<p *ngIf="!info || !info.running">ppspider is not working !</p>

<ng-container *ngIf="info?.running">
  <div class="buttons">
    <ng-container *ngIf="info?.queue?.pause == false">
      <button (click)="resetQueueManagerPause(true)" mat-icon-button>
        <mat-icon
          matTooltip="Pause QueueManager"
          style="color: #ffb670">pause</mat-icon>
      </button>
    </ng-container>
    <ng-container *ngIf="info?.queue?.pause">
      <button (click)="resetQueueManagerPause(false)" mat-icon-button>
        <mat-icon
          matTooltip="Resume QueueManager"
          style="color: #2c8aff">play_arrow</mat-icon>
      </button>
    </ng-container>
    <ng-container *ngIf="info?.queue?.cacheExist">
      <button (click)="deleteQueueCache()" mat-icon-button>
        <mat-icon
          matTooltip="Delete queue cache"
          style="color: #ff4d44">delete_forever</mat-icon>
      </button>
    </ng-container>
    <ng-container *ngIf="info?.queue">
      <button (click)="showShutdownConfirm()" mat-icon-button>
        <mat-icon
          matTooltip="Shutdown the system"
          style="color: #ff4384">stop</mat-icon>
      </button>
    </ng-container>
  </div>
</ng-container>

<mat-grid-list *ngIf="info?.running" cols="3" rowHeight="100px">
  <mat-grid-tile [colspan]="1" [rowspan]="1">
    <div class="taskNumItem success">
      <mat-icon>done</mat-icon>
      <h4>{{info.queue.success}}</h4>
      <span>success</span>
    </div>
  </mat-grid-tile>

  <mat-grid-tile [colspan]="1" [rowspan]="1">
    <div class="taskNumItem running">
      <mat-icon>refresh</mat-icon>
      <h4>{{info.queue.running}}</h4>
      <span>running</span>
    </div>
  </mat-grid-tile>

  <mat-grid-tile [colspan]="1" [rowspan]="1">
    <div class="taskNumItem fail">
      <mat-icon>error</mat-icon>
      <h4>{{info.queue.fail}}</h4>
      <span>fail</span>
    </div>
  </mat-grid-tile>
</mat-grid-list>

<ng-container *ngIf="info?.queue && info.queue.queues">
  <ng-container *ngFor="let queue of info.queue.queues; let queueI = index">
    <mat-divider></mat-divider>
    <mat-card [class]="'queueItem ' + queue.type">
      <mat-card-header>
        <mat-icon *ngIf="queue.type == 'OnStart'" mat-card-avatar class="icon">launch</mat-icon>
        <mat-icon *ngIf="queue.type == 'OnTime'" mat-card-avatar class="icon">timer</mat-icon>
        <mat-icon *ngIf="queue.type == 'FromQueue'" mat-card-avatar class="icon">queue_music</mat-icon>
        <mat-card-title>
          {{queue.name}}
          <button (click)="queue.type == 'OnStart' ? updateQueueConfig(queue.name, 'execute', null) : null" [style.visibility]="queue.type == 'OnStart' ? 'visible' : 'hidden'" mat-icon-button>
            <mat-icon
              matTooltip="Execute this OnStart job again">refresh</mat-icon>
          </button>
        </mat-card-title>
        <mat-card-subtitle>
          <span class="taskType">{{queue.type}}</span>
          {{queue.target + '.' + queue.method}}
        </mat-card-subtitle>
        <mat-card-subtitle *ngIf="queue.description">{{queue.description}}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div *ngIf="queue.type == 'OnStart' || queue.type == 'OnTime'" class="row">
          <label class="key">urls</label>
          <div class="value">
            <div *ngFor="let url of queue.urls" class="url">
              <a [href]="url" target="_blank">{{url}}</a>
            </div>
          </div>
        </div>
        <div *ngIf="queue.type == 'FromQueue'" class="row">
          <label class="key">queue</label>
          <div class="value">
            <div class="url">
              <a>{{queue.from + ' : ' + queue.queue.type + '(filters = [' + queue.queue.filters + '], size = ' + queue.queue.size + ')'}}</a>
            </div>
          </div>
        </div>

        <div class="row">
          <label class="key">workerFactory</label>
          <div class="value">{{queue.workerFactory}}</div>
        </div>

        <div class="row">
          <label class="key">maxParallelConfig</label>
          <div class="value">
              <span (click)="openEditConfig(queue, 'parallel', queue.parallel)" class="editable">
                {{stringify(queue.parallel)}}
              </span>
          </div>
        </div>

        <div class="row">
          <div class="grid">
            <label class="key">exeInterval</label>
            <div class="value">
              <span (click)="openEditConfig(queue, 'exeInterval', queue.exeInterval)" class="editable">{{queue.exeInterval}}</span>
              <span class="unit">ms</span>
            </div>
          </div>
          <div class="grid">
            <label class="key">lastExeTime</label>
            <div class="value">{{queue.lastExeTime | longToDateStr}}</div>
          </div>
          <ng-container *ngIf="queue.type == 'OnTime'">
            <div class="grid">
              <label class="key">cron</label>
              <div class="value">
                <span (click)="openEditConfig(queue, 'cron', queue.cron)" class="editable">{{queue.cron}}</span>
              </div>
            </div>
            <div class="grid">
              <label class="key">nextExeTime</label>
              <div class="value">{{queue.nextExeTime | longToDateStr}}</div>
            </div>
          </ng-container>
        </div>

        <div class="row">
          <div class="grid">
            <label class="key">curMaxParallel</label>
            <div class="value">
              <span (click)="openEditConfig(queue, 'curMaxParallel', queue.curMaxParallel)" class="editable">{{queue.curMaxParallel}}</span>
            </div>
          </div>
          <div class="grid">
            <label class="key">success</label>
            <div class="value">{{queue.success}}</div>
          </div>
          <div class="grid">
            <label class="key">running</label>
            <div class="value">{{queue.curParallel}}</div>
          </div>
          <div class="grid">
            <label class="key">fail</label>
            <div class="value">{{queue.fail}}</div>
          </div>
        </div>

      </mat-card-content>
    </mat-card>
  </ng-container>
</ng-container>

<div style="padding: 128px 0 0 0"></div>
